<!--
Copyright 2017 Google Inc. All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the License for the specific language governing permissions and limitations under
the License.
-->

<link rel="import" href="../../components/base-dialog/base-dialog.html">
<link rel="import" href="../../components/bread-crumbs/bread-crumbs.html">
<link rel="import" href="../../components/datalab-icons/datalab-icons.html">
<link rel="import" href="../../components/datalab-notification/datalab-notification.html">
<link rel="import" href="../../components/datalab-page/datalab-page.html">
<link rel="import" href="../../components/delete-dialog/delete-dialog.html">
<link rel="import" href="../../components/inline-details-pane/inline-details-pane.html">
<link rel="import" href="../../components/input-dialog/input-dialog.html">
<link rel="import" href="../../components/item-list/item-list.html">
<link rel="import" href="../../components/new-notebook-dialog/new-notebook-dialog.html">
<link rel="import" href="../../components/preview-pane/preview-pane.html">
<link rel="import" href="../../components/resizable-divider/resizable-divider.html">
<link rel="import" href="../../components/shared-styles/shared-styles.html">
<link rel="import" href="../../modules/file-manager-factory/file-manager-factory.html">
<link rel="import" href="../../modules/session-manager/session-manager.html">
<link rel="import" href="../../modules/settings-manager/settings-manager.html">
<link rel="import" href="../../modules/utils/utils.html">
<link rel="import" href="../directory-picker-dialog/directory-picker-dialog.html">

<link rel="import" href="../../bower_components/polymer-decorators/polymer-decorators.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">

<dom-module id="file-browser">
  <template>

    <style include="datalab-shared-styles">
      :host {
        display: flex;
        flex-direction: column;
      }
      div {
        font-family: var(--app-content-font-family);
        font-size: var(--app-content-font-size);
        color: var(--primary-fg-color);
      }
      resizable-divider {
        width: 100%;
        height: 100%;
      }
      #toolbar {
        flex: 0 0 var(--toolbar-height);
        width: 100%;
        background-color: var(--secondary-bg-color);
        border-bottom: 1px solid var(--border-color);
        padding-left: 15px;
        box-sizing: border-box;
      }
      #altAddToolbarToggle, #altUpdateToolbarToggle {
        display: none;
      }
      #fileSourceToggle {
        color: var(--primary-fg-color);
        padding: 0px 15px;
      }
      .dropdown-menu-container {
        position: relative;
      }
      .dropdown-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--primary-bg-color);
        color: var(--primary-fg-color);
        position: absolute;
        left: 0px;
        margin: 0px;
        padding: 3px 0px;
        min-width: 200px;
        box-shadow: 0px 0px 10px 1px var(--box-shadow-color);
        border: 1px solid var(--outline-color);
      }
      .dropdown-menu > * {
        padding: 10px;
        margin: 0px;
        width: 100%;
      }
      #file-picker {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      #navbar {
        display: flex;
        flex: 0 0 calc(var(--toolbar-height) - 1px);
        background-color: var(--primary-bg-color);
        padding-left: 10px;
      }
      .files-container {
        display: flex;
        flex: 1 1 auto;
      }
      #files {
        flex: 1 1 auto;
        background-color: var(--primary-bg-color);
      }
      #previewPane {
        background-color: var(--secondary-bg-color);
        box-shadow: inset 4px 0px 10px -3px var(--box-shadow-color);
        transition: width var(--app-animation-duration);
      }
      .preview-pane-enabled--true {
        width: var(--preview-pane-width);
      }
      .preview-pane-enabled--false {
        width: 0px;
      }
      .visibility-highlighted--true {
        color: var(--selection-fg-color);
      }
      .vseparator {
        display: inline;
        border-left: 1px solid var(--border-color);
        line-height: var(--toolbar-height);
      }
      #breadCrumbs {
        flex: 1 1 auto;
      }
    </style>

    <div id="toolbar" hidden$="{{_isToolbarHidden}}">

      <div id="fileToolbar" hidden$="[[!_isToolbarMode('files')]]">

        <!--Default Add toolbar, contains Add buttons for notebook, file, and folder-->
        <span id="addToolbar">
          <paper-button id="newNotebookButton" class="toolbar-button" on-click="_createNewNotebook">
            <iron-icon icon="add-box"></iron-icon>
            <span>Notebook</span>
          </paper-button>
          <paper-button id="newFileButton" class="toolbar-button" on-click="_createNewFile">
            <iron-icon icon="add-box"></iron-icon>
            <span>File</span>
          </paper-button>
          <paper-button id="newFolderButton" class="toolbar-button" on-click="_createNewDirectory">
            <iron-icon icon="add-box"></iron-icon>
            <span>Folder</span>
          </paper-button>
        </span>

        <!--Alternative Add toolbar, shows up when toolbar is too small-->
        <span id="altAddToolbarContainer" class="dropdown-menu-container">
          <paper-button id="altAddToolbarToggle" class="toolbar-button"
                        on-click="_toggleAltAddToolbar">
            <iron-icon icon="add-box"></iron-icon>
            <span>New</span>
            <iron-icon icon="hardware:keyboard-arrow-down"></iron-icon>
          </paper-button>
          <paper-dialog id="altAddToolbar" class="dropdown-menu" on-blur="_closeDropdown">
          </paper-dialog>
        </span>

        <!--Default Update toolbar, contains buttons to modify files/folders-->
        <span id="updateToolbar">
          <paper-button id="uploadButton" class="toolbar-button" on-click="_altUpload">
            <iron-icon icon="file-upload"></iron-icon>
            <span>Upload</span>
          </paper-button>
          <!--This is hidden but its functionality is used by the alt upload button above-->
          <input type="file" id="altFileUpload" multiple style="display: none"
                 on-change="_upload">
          <paper-button id="editAsTextButton" class="toolbar-button"
                        on-click="_openSelectedInEditor" disabled$={{!selectedFile}}>
            <iron-icon icon="editor:short-text"></iron-icon>
            <span>Edit as Text</span>
          </paper-button>
          <!--TODO: Enable copy/move buttons when multiple files are selected-->
          <paper-button id="copyButton" class="toolbar-button" on-click="_copySelectedItem"
                        disabled$={{!selectedFile}}>
            <iron-icon icon="content-copy"></iron-icon>
            <span>Copy</span>
          </paper-button>
          <paper-button id="moveButton" class="toolbar-button" on-click="_moveSelectedItem"
                        disabled$={{!selectedFile}}>
            <iron-icon icon="redo"></iron-icon>
            <span>Move</span>
          </paper-button>
          <paper-button id="renameButton" class="toolbar-button" on-click="_renameSelectedItem"
                        disabled$={{!selectedFile}}>
            <iron-icon icon="editor:border-color"></iron-icon>
            <span>Rename</span>
          </paper-button>
          <paper-button id="deleteButton" class="toolbar-button" on-click="_deleteSelectedItems"
                        disabled$=[[!_selectedFilesLength]]>
            <iron-icon icon="delete"></iron-icon>
            <span>Delete</span>
          </paper-button>
        </span>

        <!--Alternative Update toolbar, shows up when toolbar is too small-->
        <span id="altUpdateToolbarContainer" class="dropdown-menu-container">
          <paper-button id="altUpdateToolbarToggle" class="toolbar-button"
                        on-click="_toggleAltUpdateToolbar">
            <iron-icon icon="more-horiz"></iron-icon>
          </paper-button>
          <paper-dialog id="altUpdateToolbar" class="dropdown-menu" on-blur="_closeDropdown">
          </paper-dialog>
        </span>

      </div> <!-- fileToolbar -->

      <div id="dataToolbar" hidden$=[[!_isToolbarMode('data')]]>

        <paper-button class="toolbar-button" on-click="_openInNotebook"
                        disabled$={{!_canOpenInNotebook}}>
          <iron-icon icon="add-box"></iron-icon>
          <span>Open in Notebook</span>
        </paper-button>

      </div> <!-- dataToolbar -->

    </div> <!-- toolbar -->

    <div id="file-picker">
      <!--Navigation bar with back/forward buttons, refresh, and breadcrumbs-->
      <div id="navbar">
        <span id="fileSourcesContainer" class="dropdown-menu-container">
          <paper-button id="fileSourceToggle" class="toolbar-button"
                        on-click="_toggleFileSourceDropdown"
                        disabled$="{{!_hasMultipleFileSources}}">
            <iron-icon icon="{{_fileManagerDisplayIcon}}"></iron-icon>
            <span>{{_fileManagerDisplayName}}</span>
            <iron-icon icon="hardware:keyboard-arrow-down" hidden$="{{!_hasMultipleFileSources}}">
            </iron-icon>
          </paper-button>
          <paper-dialog id="fileSourcesDropdown" class="dropdown-menu" on-blur="_closeDropdown">
          </paper-dialog>
        </span>

        <paper-button id="backNav" class="toolbar-button" on-click="_navBackward">
          <iron-icon icon="chevron-left"></iron-icon>
        </paper-button>
        <paper-button id="forwardNav" class="toolbar-button" on-click="_navForward">
          <iron-icon icon="chevron-right"></iron-icon>
        </paper-button>
        <paper-button class="toolbar-button" hidden$="{{small}}" on-click="_fetchFileList">
          <iron-icon icon="refresh"></iron-icon>
        </paper-button>

        <div class="vseparator"></div>
        <bread-crumbs id="breadCrumbs"></bread-crumbs>
        <paper-button id="togglePreview" class="toolbar-button" on-click="_togglePreviewPane"
                      hidden$="{{small}}">
          <iron-icon icon="visibility" hidden$="{{_isPreviewPaneToggledOn}}"
                     class$="visibility-highlighted--{{_canPreview}}"></iron-icon>
          <iron-icon icon="visibility-off" hidden$="{{!_isPreviewPaneToggledOn}}"></iron-icon>
        </paper-button>
      </div>

      <!--Thin progress bar that shows until files are loaded-->
      <paper-progress id="progressBar" class="progressbar" indeterminate
                      disabled={{!_showProgressBar}}>
      </paper-progress>

      <!--File listing-->
      <resizable-divider id="filesContainer" class="files-container"
          divider-position="{{_dividerPosition}}"
          disable-right="{{small}}"
          hide-right="{{!_isPreviewPaneToggledOn}}">
        <item-list id="files" slot="left" hide-header$="{{small}}" disable-selection$="{{small}}"></item-list>
        <preview-pane id="previewPane" slot="right" file="{{selectedFile}}" active="{{_isPreviewPaneEnabled}}"
                      class$="preview-pane-enabled--{{_isPreviewPaneEnabled}}">
        </preview-pane>
      </resizable-divider>
    </div>

  </template>
</dom-module>

<script src="file-browser.js"></script>
